<!-- ParentComponent.vue -->
<template>
  <div class="editor-demo">
    <!--    <h2>Vue 2 + Monaco Editor 代码补全演示</h2>-->

    <!-- 语言选择器 -->
    <div class="controls">
      <label>选择语言: </label>
      <select v-model="currentLanguage">
        <option value="javascript">JavaScript</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="python">Python</option>
        <option value="json">JSON</option>
        <option value="sql">SQL</option>
      </select>

      <button @click="formatCode">格式化代码</button>
      <button @click="getCode">获取代码</button>
    </div>

    <!-- Monaco编辑器组件 -->
    <MonacoEditor
        v-model="code"
        :language="currentLanguage"
        theme="vs-dark"
        @change="onCodeChange"
    />
  </div>
</template>

<script>
import MonacoEditor from '@/components/MonacoEditor.vue';

export default {
  name: 'ParentComponent',
  components: {
    MonacoEditor
  },
  data() {
    return {
      code: `// 欢迎使用Monaco Editor
select * from
`,
      currentLanguage: 'sql'
    };
  },
  methods: {
    onCodeChange(newCode) {
      // console.log('代码已变更:', newCode);
    },
    formatCode() {
      // 调用子组件的格式化方法
      this.$refs.editor.formatCode();
    },
    getCode() {
      alert(this.code);
    }
  }
};
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
html,body{
  height: 100%;
}
.editor-demo {
  height:100%
}
.controls {
  display: none;
  margin-bottom: 15px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.controls label, .controls select, .controls button {
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background: #66b1ff;
}
</style>